<template>
  <NoTabBarPage custom-class="login-index">
    <div class="login-index__wrapped">
      <div class="login-index__logo">
        <CommonLogo />
      </div>

      <div class="login-index__group">
        <span class="login-index__group-tip">请确认以下授权信息</span>
        <span class="login-index__group-tip1"
          >获取你的信息（头像，信息等）</span
        >

        <div class="btn-group">
          <!-- <button
            open-type="getPhoneNumber"
            class="login-index__group-btn"
            @getphonenumber="getPhoneNumber"
          >
            授权登录
          </button> -->

          <div
            v-for="item in btnOptions"
            :key="item.value"
            class="login-index__group-btn"
            @tap="onSelect(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </NoTabBarPage>
</template>

<script setup lang="ts">
import { useLogin } from "@/hooks/useLogin";
import Taro from "@tarojs/taro";
import NoTabBarPage from "@/components/common-page/noTabBar-page.vue";
import CommonLogo from "@/components/common-logo/index.vue";
defineOptions({
  name: "login-index",
});

const btnOptions = [
  {
    label: "授权登录",
    value: "login",
  },
  {
    label: "返回首页",
    value: "back",
  },
];

const { login } = useLogin();

const onSelect = (type: string) => {
  switch (type) {
    case "login":
      login();
      break;
    case "back":
      onBackIndex();
      break;
    default:
  }
};

const onBackIndex = () => {
  Taro.switchTab({ url: "/pages/home/index" });
};
</script>

<style lang="less">
.login-index {
  background-color: white;
  &__wrapped {
    width: 100%;
    height: 100%;
    padding: 30px 62px 0 62px;
    box-sizing: border-box;
  }
  &__logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    .logo {
      width: 148px;
      height: 148px;
    }
    &-title {
      font-weight: bold;
      font-size: 32px;
      color: #000;
      line-height: 44px;
    }
  }

  &__group {
    margin-top: 60px;
    padding-top: 50px;
    width: 100%;
    border-top: 1px solid #e2e3e6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    &-tip {
      font-weight: 400;
      font-size: 36px;
      color: #000000;
      line-height: 50px;
    }
    &-tip1 {
      font-weight: 400;
      font-size: 28px;
      color: #8b8b8b;
      line-height: 40px;
    }
    .btn-group {
      width: 100%;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      gap: 50px;
    }
    &-btn,
    &-back {
      width: 100%;
      height: 84px;
      background: #60b89b;
      border-radius: 10px;

      font-weight: 400;
      font-size: 36px;
      color: #fff;
      line-height: 50px;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
